<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

	<style type="text/css">
	
	
	
	</style>
</head>
<body>
	<h4>List</h4>
	
	<div >
	
		<table  id="userTableList" border="1" cellpadding="0" cellspacing="0" width="500px">
			<tr>
				<td>id</td>
				<td>手机号码</td>
				<td>密码</td>
			</tr>
			
			
		</table>
	
	</div>

</body>

	<!-- 军规：凡是路径 js css 请求 全部用绝对路径 webapp  -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.4.js" ></script>
	
	
	<script>
	
	
		//var currentPage2 =1;
	
		$(function(){
			
			nextPage(1);
			
			
			
			
		});
		
		
		function nextPage(currentPage){
			
			//currentPage2 = currentPage2+1;
			$.ajax({
				'type':'post',
				'url':'${pageContext.request.contextPath}/user?method=findWithPage',
				'data':{
					'currentPage':currentPage,
					'pageSize':2,
				},
				'success':function(jsonData){
					
					$('#userTableList tr.abc').remove();
					//结合
					var list = jsonData.list;
					
					for(var index=0; index<list.length;index++){
						
						var user=list[index];
						
						
						var id       =user.id;
						var phone    =user.phone;
						var password =user.password;
						
						
						//逻辑思路 总的目标  在table  插入1个tr
						
						// 3个小目标      td 变化
						
						//1
						
						var td01 = $("<td>"+id+"</td>");
						var td02 = $("<td>"+phone+"</td>");
						var td03 = $("<td>"+password+"</td>");
						
						
						var tr = $("<tr class='abc'></tr>");
						tr.append(td01);
						tr.append(td02);
						tr.append(td03);
						
						
						
						$('#userTableList').append(tr);
						
						
						
					}
					
					var  currentPage2 = jsonData.currentPage+1;
					
					var fenye =$("<tr class='abc'><td>上一页</td><td></td><td><a href='javascript:void(0);' onclick='nextPage("+currentPage2+");'>下一页</a></td></tr>")
					$('#userTableList').append(fenye);
					
					
					
				},
				'dataType':'json',
			});
		}
	
	
	</script>
	
	
</html>